<style>
    /*preload classes*/
    .svw {width: 50px; height: 20px; background: #fff  ;}
    .svw ul {position: relative; left: -999em;}
    .svw ul li img{
    	width: 200px;
    	height:150px;
    }
    /*core classes*/
	.stripViewer {
	    position: relative;
	    overflow: hidden;
	    border: 5px solid;
	    margin: 0 0 1px 0;
    }
    .stripViewer ul { /* this is your UL of images */
	    margin: 0;
	    padding: 0;
	    position: relative;
	    left: 0;
	    top: 0;
	    width: 1%;
	    list-style-type: none;
    }
    .stripViewer ul li {
    	float:left;
    }
    .stripTransmitter {
	    overflow: auto;
	    width: 1%;
    }
    .stripTransmitter ul {
	    margin: 0;
	    padding: 0;
	    position: relative;
	    list-style-type: none;
    }
    .stripTransmitter ul li{
	    width: 20px;
	    float:left;
	    margin: 0 1px 1px 0;
    }
    .stripTransmitter a{
	    font: bold 10px Verdana, Arial;
	    text-align: center;
	    line-height: 22px;
	    background: #ff;
	    color: #ff0000;
	    text-decoration: none;
	    display: block;
    }
    .stripTransmitter a:hover, a.current{
	    background:  #ff0000;
	    color: #fff  ;
    }
    /*tooltips formatting*/
    .tooltip
    {
	    padding: 0.5em;
	    background: #fff  ;
	    color: #000  ;
	    border: 5px solid #dedede  ;
    } 
	.navbtnImage{
		float:right;
		margin-bottom: 5px;
		width: 70px;
	}
	.btnTiny{
		padding: 5px;
		float:left;
		background: white;
		margin-right:5px;
	}
	.btnTiny img{
		width: 16px;
		height: 16px;
	}
	.btnTiny:hover{
		background: green;
		border:1px solid red;
	}
</style>
<div style="width:200px;float:right;">			
	<?php echo $this->translator("core_image_title","core");?>
	<div class="navbtnImage">
		<span>
			<a href="javascript:void(0)" class="btnTiny btnAddImage"><img src="<?php echo $this->APP_STATIC_SERVER;?>/images/icons/upload_icon.png"/></a>
		</span>		
		<span>
			<a class="btnTiny removeImage" href="javascript:void(0)" title="<?php echo $this->translator("core_remove_image_tooltip","core");?>">
				<img src="<?php echo $this->APP_STATIC_SERVER;?>/images/icons/remove_icon.png"/>
			</a>
		</span>
	</div>
	<input type="hidden" name="<?php echo $this->elementId;?>" id="<?php echo $this->elementId;?>" value="<?php echo $this->value;?>"/>
	<?php
		$images = null;
		if($this->value){
			$images = explode(',',$this->value);
		} 
	?>
	
    <div id="list<?php echo $this->resource_type;?>Image<?php echo $this->resource_id;?>" class="svw">
    	<?php if($images):?>
		<ul>
			<?php foreach($images as $itemImage):?>
		    <li><img width="180" height="200"  src="<?php echo Core_Services_Image::getResourceImage($this->resource_type,$this->resource_id, $itemImage)?>" rel="<?php echo $itemImage;?>"/></li>
		    <?php endforeach;?>
	    </ul>
	    <?php else:?>
	    <ul>
	    	<li class="no-image"><img width="180" height="200"  src="<?php echo Core_Services_Image::getResourceNoImage($this->resource_type);?>"/></li>
	    </ul>
	    <?php endif;?>
    </div>
    
	<div id="dialogUpload_<?php echo $this->resource_id;?>" style="display:none;">
		<?php echo
				$this->helperLoader('core')->uploader( 
					array('extension' => '["jpg","jpeg","png","gif"]','sizeLimit' => 1024 * 1024 * 5), 
					array('onComplete' => 'onUploadComplete'),
					'dialogUpload_<?php echo $this->resource_id;?>',
					Zend_Auth::getInstance()->getIdentity()->shop->id,$this->resource_type.'s',$this->resource_id);						 
		?>
	</div>	
	<script type="text/javascript">
		function implode( glue, pieces ) {  
		    return ( ( pieces instanceof Array ) ? pieces.join ( glue ) : pieces );  
		}  
		function uploadValueImages(){
			var arrImg = [];
			$("#list<?php echo $this->resource_type;?>Image<?php echo $this->resource_id;?>").find("img").each(function(){
				arrImg.push($(this).attr("rel"));
			});
			$("#<?php echo $this->elementId;?>").val(implode(',',arrImg));	
		}				
		function onUploadComplete(event,old_file, res) {						
			if(res.success== true){		
				console.log(res);					
				var url = res.url;
				var rel = res.fileName;							
				$("#list<?php echo $this->resource_type;?>Image<?php echo $this->resource_id;?>").find("ul li:first").before('<li><img src="'+url+'" rel="'+rel+'" width="180" height="200"/></li>');
				$("#list<?php echo $this->resource_type;?>Image<?php echo $this->resource_id;?>").find(".no-image").remove();
				
				$("#list<?php echo $this->resource_type;?>Image<?php echo $this->resource_id;?>").find("ul").css("left","0px");
				$("#list<?php echo $this->resource_type;?>Image<?php echo $this->resource_id;?>").next(".stripTransmitter").html("");
				$("div#list<?php echo $this->resource_type;?>Image<?php echo $this->resource_id;?>").slideView();
				uploadValueImages();
			}else{
				alert(res.message);	
			}
		};	
		$(document).ready(function(){
			$(".btnAddImage").click(function(){		
				$("#dialogUpload_<?php echo $this->resource_id;?>").dialog({
					title: '<?php echo $this->translator("title_dialog_upload_image","core");?>',
					dialogClass: 't_a_ui_dialog',
					position: 'center',
					modal: true,
					closeOnEscape: false,
					resizable: true,
					width: 600,
					height: 300,
					"buttons": { 
							"OK": function() {
								$(this).dialog("close"); 
							}
					}, 					
					close: function(event, ui) {
						$(this).dialog('destroy');                       
					},
					open: function(event, ui){
						$(".ui-dialog-buttonpane").find("button").each(function(){
							$(this).css("width","50px");
							$(this).css("padding","6px");
							$(this).css("background","#D2691E");
						});	
					}
				});								
			});
			$(".removeImage").click(function(){
				if($("#list<?php echo $this->resource_type;?>Image<?php echo $this->resource_id;?>").find(".no-image").size()>0){
					alert("<?php echo $this->translator("core_remove_no_image","core");?>");
				}else
				if(confirm("<?php echo $this->translator("core_confirm_remove_image","core")?>")){
					var transmitter = $("#list<?php echo $this->resource_type;?>Image<?php echo $this->resource_id;?>").next(".stripTransmitter");
					var currentItem = transmitter.find(".current").text();			
					$("#list<?php echo $this->resource_type;?>Image<?php echo $this->resource_id;?>").find("li:eq("+(currentItem-1)+")").remove();
					var numAfterDeleteItem	= $("#list<?php echo $this->resource_type;?>Image<?php echo $this->resource_id;?>").find("li").size();
					if(numAfterDeleteItem==0){
						$("#list<?php echo $this->resource_type;?>Image<?php echo $this->resource_id;?>").find("ul").append("<li class='no-image'><img width='180' height='200' src='<?php echo Product_Services_GetImage::getNoImage();?>'/></li>");
					}
					$("#list<?php echo $this->resource_type;?>Image<?php echo $this->resource_id;?>").find("ul").css("left","0px");
					$("#list<?php echo $this->resource_type;?>Image<?php echo $this->resource_id;?>").next(".stripTransmitter").html("");
					$("div#list<?php echo $this->resource_type;?>Image<?php echo $this->resource_id;?>").slideView();						
					uploadValueImages();
				}
			});						
			$("div#list<?php echo $this->resource_type;?>Image<?php echo $this->resource_id;?>").slideView();						
		});			
	</script>		    
</div> 